<template>
    <div class="header-wrapper clearfix">
        <div class="header-left fl ver_center pr ml40">
            <img class="vam mr15 cursor_p" src="./img/title-icon.png" alt="" width="20" height="20"
                 @click="systemDrawer = true">
            <span class="vam c_white">{{headerName}}</span>
        </div>
        <div class="header-right fr ver_center pr mr40">
            <img class="mr20 cursor_p" src="./img/messages.png" alt="" @click="msgDrawer = true">
            <img class="cursor_p" src="@/assets/images/user.png" alt="" @click="outSystem()">
        </div>
        <!--消息抽屉-->
        <div class="message-box">
            <el-drawer
                    custom-class="drawer-box fz18"
                    title="消息"
                    size="20%"
                    :visible.sync="msgDrawer">
                <span class="c_9 p20 fz14">暂无新消息</span>
                <ul class="msg-list mt20">
                    <li class="msg-item cursor_p" v-for="item in msgList" :key="item.id" @click="showMsgDetail(item)">
                        <span class="circle-icon mr10"></span>
                        <div class="item-info">
                            <p class="item-info-title c_3 fz14">{{item.title}}</p>
                            <p class="item-info-content c_9 fz12">{{item.content}}</p>
                        </div>
                    </li>
                </ul>
            </el-drawer>
        </div>
        <!--消息弹框-->
        <el-dialog
                class="msg-dialog"
                :title="dialogTitle + '消息'"
                :visible.sync="dialogVisible"
                width="800">
            <ul class="msg-list">
                <li class="msg-item p20" v-for="item in msgDetailList" :key="item.id">
                    <img class="mr20 vat" src="./img/message-icon.png" alt="">
                    <div class="item-content">
                        <p><span class="c_9">{{dialogTitle + '通知：'}}</span>{{item.content}}</p>
                        <p class="c_9 pt10">{{item.createTime}}</p>
                    </div>
                </li>
            </ul>
            <!--<span slot="footer" class="dialog-footer">-->
            <!--<el-button @click="dialogVisible = false">取消</el-button>-->
            <!--<el-button type="primary" @click="dialogVisible = false">确定</el-button>-->
            <!--</span>-->
        </el-dialog>
        <!--系统抽屉-->
        <el-drawer
                custom-class="drawer-box fz18"
                title="系统切换"
                size="20%"
                :show-close = false
                direction="ltr"
                :visible.sync="systemDrawer">
            <ul class="msg-list mt20">
                <li class="msg-item cursor_p" v-for="item in systemList" :key="item.id" @click="systemSwitch(item)">
                    <img class="system-icon" :src="item.icon" alt="">
                    <span class="item-info-title c_3 fz14">{{item.name}}</span>
                </li>
            </ul>
        </el-drawer>
    </div>
</template>

<script src="./header.js"></script>

<style scoped lang="scss">
    .header-wrapper {
        width: 100%;
        height: 70px;
        background: linear-gradient(-90deg, rgba(42, 208, 210, 1), rgba(0, 138, 255, 1));
        box-shadow: 0 7px 8px 0 rgba(1, 139, 254, 0.2);

        .msg-dialog {
            .msg-list {
                .msg-item {
                    border-bottom: 1px dashed rgba(225, 224, 223, 1);

                    .item-content {
                        display: inline-block;
                        width: 90%;

                        p {
                            line-height: 26px;
                        }
                    }

                    &:last-child {
                        border-bottom: none;
                    }
                }

            }
        }
    }
</style>
